<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <!-- dom 可以看做就是一个树 可用层序遍历 /深度遍历  -->
    <div id="father">
      <div class="son1">
        <div class="son11">11</div>
        <div class="son12">12</div>
      </div>
      <div class="son2">2</div>
      <div class="son3">
        <div class="son31">31</div>
      </div>
      <div class="son4">
        <div class="son41">41</div>
      </div>
    </div>
    <script>
      console.log(document.body.children);
      // 删除类名与字符串相同的dom节点
      function getAllDOM(str) {
        // 先获取dom节点
        const fatherNode = document.getElementById(str);
        console.log(fatherNode);
        // children是类数组 需扩展一下
        const queue = [...fatherNode.children];
        // 剔除script标签  不剔除也可以
        queue.pop();
        console.log(queue, queue.length);
        const res = [];
        while (queue.length) {
          let node = queue.shift();
          res.push(node);
          if (node.children.length) {
            queue.push(...node.children);
          }
        }
        return res;
      }
      console.log(getAllDOM('father'));
      console.log(document.body);
    </script>
  </body>
</html>
